<template>
  <div id="app">
    <el-card class="box-card">
      <div class="box_top">
        <h1>HT动态大屏</h1>
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="帐号：" prop="username">
          <el-input onkeydown="if(event.keyCode==13) {document.getElementById('loginBtn').click();return false;}"
                    v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input type="password"
                    onkeydown="if(event.keyCode==13) {document.getElementById('loginBtn').click();return false;}"
                    v-model="ruleForm.password"/>
        </el-form-item>
        <el-form-item label="验证码：" prop="code">
          <div style="display: flex">
            <el-input type="text"
                      onkeydown="if(event.keyCode==13) {document.getElementById('loginBtn').click();return false;}"
                      v-model="ruleForm.code"></el-input>
            <div class="login-code">
              <img :src="codeUrl"
                   @click="getCode">
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div style="width: 100%;text-align: center">
        <el-button type="primary" id="loginBtn" @click="login()">登录</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
  import * as u from '@/util/util'
  import * as c from '@/util/config'

  export default {
    name: "login",
    data() {
      return {
        ruleForm: {
          username: 'admin',
          password: '123456',
          code: '',
          randomStr: u.uuid(),
        },
        rules: {
          username: [
            {required: true, message: '请输入帐号', trigger: 'blur'},
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
          ],
          code: [
            {required: true, message: '请输入验证码', trigger: 'blur'},
          ],
        },
        //验证码图片url
        codeUrl: "",

      }

    },
    created() {
      this.getCode();
    },
    mounted(){

    },
    methods: {
      //获取验证码
      getCode() {
        u.get("/sys-login/getCode", {
          randomStr: this.ruleForm.randomStr,
        }).then(res => {
          this.codeUrl = res;
          this.randomStr = u.uuid();
        })
      },
      //登录
      login() {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            u.reqForm({
              url: "/login",
              method: "post",
              data: this.ruleForm,
            }).then(res => {
              //切换路由
              //设置存储用户基本信息
              u.setSession(c.sessionKey.TOKEN, res.token);
              u.setSession(c.sessionKey.USER_INFO, res.userInfo);
              u.setSession(c.sessionKey.SYS_MENU_TREE, res.userInfo.sysMenus);
              u.setSession(c.sessionKey.SYS_PERMISSIONS, res.userInfo.permissions);
              //跳转路由
              this.$router.push('/')
            }).catch(() => {
              this.getCode();
            })
          }
        });

      }


    }
  }
</script>

<style scoped>
  #app {
    width: 100%;
    height: 100%;
    background: url('/static/img/loginBg.jpg');
    background-size: 100%;
  }

  .box_top {
    text-align: center;
    padding: 30px;
  }

  .box-card {
    width: 500px;
    height: 450px;
    padding: 20px;
    margin: 0 auto;
    margin-top: 50px;

  }

</style>
